<template>
    <n-scrollbar style="height: calc(100% - 58px);">
        <ul>
            <li class="item" v-for="index in count" :key="index" @click="this.$router.push('/forum/article')">
                <div class="avatar">
                    <n-avatar round :size="60" fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F26%2F20200326100605_SkLVh.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702379201&t=449ae04a921579549f8ed208523c9a62" />
                </div>
                <n-divider vertical class="divider" />
                <n-descriptions label-placement="top" :column="2" size="large" class="content">
                    <n-descriptions-item>
                        <h4>萌新提问</h4>
                    </n-descriptions-item>
                    <n-descriptions-item>
                        <el-tag>咨询</el-tag>
                    </n-descriptions-item>
                    <n-descriptions-item>
                        <el-text class="article" truncated>
                            你们说这是不是真的呀？rt，萌新不是很懂，有没有大佬教一教这是什么东东，[哭哭]，有没有人教教我呀。呜呜呜，嘤嘤嘤。有没有人教教我呀。呜呜呜，嘤嘤嘤。有没有人教教我呀。呜呜呜，嘤嘤嘤。
                        </el-text>
                    </n-descriptions-item>
                </n-descriptions>
                <n-divider vertical class="divider" />
                <div class="data">
                    <div class="statistic">
                        <el-icon>
                            <SvgIcon name="fire" />
                        </el-icon>
                        <span>2250</span>
                    </div>
                    <div class="statistic">
                        <el-icon>
                            <Comment />
                        </el-icon>
                        <span>5012</span>
                    </div>
                </div>
            </li>
        </ul>
    </n-scrollbar>
    <div class="pagination">
        <n-space vertical>
            <n-pagination v-model:page="page" :page-count="100" show-quick-jumper>
                <template #goto>
                    跳转至
                </template>
            </n-pagination>
        </n-space>
    </div>
</template>

<script setup>
const count = ref(20);
// 分页
const page = ref(2);
</script>

<style scoped>
.item {
    float: left;
    width: 100%;
    margin: 4px 0;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

/* 分割线 */
.divider {
    margin: 0 20px;
    height: 50px;
}

.avatar {
    float: left;
    display: flex;
    margin: 0 10px;
}

.content {
    float: left;
    max-width: calc(100% - 300px);
    display: flex;
    align-items: center;
    margin: 5px 30px;
}

.article {
    width: 88%;
}

.data {
    margin: 0;
}

.statistic {
    display: flex;
    align-items: center;
    margin: 10px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>